<template>
  <div class="global-country">
    <div class="pop_box bg-fff">
        <div class="order_pop">
            <div class="title rel tac">
            <h3>{{$t('title.select_country_area')}}</h3>
            <div class="abs" @click="onCancel"><img src="../assets/images/ico_close.png" alt=""></div>
            </div>
            <div class="container">
            <div class="tip">
                {{$t('login.normal')}}
            </div>
            <ul class="lang_list">
                <li class="db" v-for="(item,k) in countryList" :key="k" @click="countryClick(item.id)">
                <div class="ico"><img :src="item.iconUrl" alt=""></div>
                <div class="flex txt">
                    {{item.name}}
                </div>
                </li>

            </ul>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    showCancle: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
        countryList:[],
        countryCode: '',
    };
  },
  watch: {
    columns: {
        handler: function(val, oldVal) {
        }
    }
  },
  mounted() {
      this.reqCountryList();
  },
  methods: {
    countryClick(id){
      let data = {
        pid: id
      };
      this.$emit("callback", data);
    },
    reqCountryList(){
      this.showCountryList = true;
      this.$post(this.URL.common.area, {

      }).then((res) => {
        if (res.code == 0) {
          this.countryList = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    onCancel() {
        this.$emit("callback", null);
    },

  }
};
</script>
<style scoped lang="less">
.lang_list {
    padding-bottom: .4rem;
    height: 4.5rem;
    overflow: auto;
    li {
      line-height: .84rem;
      .flex {
        border-bottom: .02rem solid #eee;
        font-size: .28rem;
        color: #14191F;
        margin-left: .28rem;
      }
      .ico {
        img {
          height: .32rem;
          vertical-align: middle;
        }
      }
    }
  }
</style>
